<template>
    <div style="margin: 20px;">
        <el-container>           
        <el-header >        
          <span style="font-size:60px">发票补打/重打</span>
          <el-link type="primary" href="/#/initMain" style="float:right"><b>返回首页</b></el-link>
        </el-header>
        <el-main style="text-align:left">               
            <span ><b>发票信息查询</b></span><br/>
            <div>
            <el-form  :model="reInvoiceForm" :rules="rules" ref="reInvoiceForm" label-width="60px" class="demo-reInvoiceForm">  
                <el-row gutter="20">
                    <el-col span="8">            
                <el-form-item label="病历号" prop="patientId" >
                <el-input v-model="reInvoiceForm.patientId"  placeholder="病历号"></el-input>
                </el-form-item>
                    </el-col>
                    <el-col span="8">            
                <el-form-item label="发票号" prop="invoiceId" >
                <el-input v-model="reInvoiceForm.inoiceId"  placeholder="发票号"></el-input>
                </el-form-item>
                    </el-col>
                    
                <el-button type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
                </el-row>
            </el-form>
            </div>

                <hr/>
                <span ><b>发票信息</b></span>
                
                 <el-table
                    :data="tableData"
                    style="width: 100%"
                    max-height="250"
                    :default-sort = "{prop: 'date'}">
                    <el-table-column
                        prop="patientId"
                        label="病历号"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="invoiceId"
                        label="发票号"
                        width="150">
                    </el-table-column>
                    <el-table-column
                    prop="date"
                    label="发票日期"
                    sortable
                    width="150">
                    </el-table-column>
                    
                  <!--  <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="deleteRow(scope.$index, tableData)"
                        type="text"
                        size="small">
                        退号
                        </el-button>
                    </template>
                    </el-table-column>-->
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          @click="handleWatch(scope.$index, scope.row)">查看</el-button>
                        <el-button
                          size="mini"
                          type="danger"
                          @click="handleFill(scope.$index, scope.row)">补打</el-button>
                        <el-button
                          size="mini"
                          type="danger"
                          @click="handlRe(scope.$index, scope.row)">重打</el-button>
                      </template>
                    </el-table-column>
 
                </el-table>
                

              </el-main>
            </el-container>
   </div>
</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    
  }
</style>

<script>
  export default {
    
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
        });
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleRe(index, row) {
        console.log(index, row);
      }

    },
    data() {
      return {
        


        reInvoiceForm:{
            patientId:'' ,
            invoiceId:''      
        },
        rules: {
          patientId: [
            { required: true, message: '请输入病历号', trigger: 'blur' },
            { min: 5, max: 9, message: '长度在 5 到 9 个字符', trigger: 'blur' }
          ],
          invoiceId: [
            { required: true, message: '请输入发票号', trigger: 'blur' },
            { min: 5, max: 9, message: '长度在 5 到 9 个字符', trigger: 'blur' }
          ]
        },
        tableData: [{
          patientId: '000000001',
          name:'王小虎',
          invoiceId:'100000061',
          date: '2016-10-2'
          
        }, {
         patientId: '000000001',
          name:'王小虎',
          invoiceId:'10000005',
          date: '2017-10-2'
        }, {
          patientId: '000000001',
          name:'王小虎',
          invoiceId:'10000003',
          date: '2012-10-2'
        },{
          patientId: '000000001',
          name:'王小虎',
          invoiceId:'10000001',
          date: '2013-10-2'
        }, {
          patientId: '000000001',
          name:'王小虎',
          invoiceId:'10001111',
          date: '2014-10-2'
        }
        ]
      }
    }
  }
</script>